<script setup lang="ts">
import F_image_input from "@/components/common/f_image_input.vue";
import F_site_base from "@/components/admin/f_site_base.vue";
import type {siteInfoType} from "@/api/settings_api";
const labelColProps = {
  span: 14
}
const wrapperColProps = {
  span: 10
}

</script>

<template>
  <div class="site_info_view">
    <f_site_base ref="fSiteBaseRef" name="site_info" v-slot="{data}:{data: siteInfoType}">
      <a-form>
        <a-row>
          <a-col :span="8">
            <div class="title">网站设置</div>
            <div class="body">
              <a-form-item label="网站标题">
                <a-input v-model="data.site.title" placeholder="网站标题"></a-input>
              </a-form-item>
              <a-form-item label="英文标题">
                <a-input v-model="data.site.enTitle" placeholder="英文标题"></a-input>
              </a-form-item>
              <a-form-item label="logo">
                <f_image_input v-model="data.site.logo" label="logo"></f_image_input>
              </a-form-item>
              <a-form-item label="slogan">
                <a-textarea :auto-size="{minRows: 4, maxRows: 5}" v-model="data.site.slogan" placeholder="slogan"></a-textarea>
              </a-form-item>
              <a-form-item label="slogan介绍">
                <a-textarea :auto-size="{minRows: 4, maxRows: 5}" v-model="data.site.abstract" placeholder="slogan介绍"></a-textarea>
              </a-form-item>
              <a-form-item label="备案号">
                <a-input v-model="data.site.beian" placeholder="备案号"></a-input>
              </a-form-item>
              <div class="update_btn">

              </div>
            </div>
          </a-col>
          <a-col :span="8" :offset="1">
            <div class="title">项目设置</div>
            <div class="body">
              <a-form-item label="网站title">
                <a-input v-model="data.project.title" placeholder="网站title"></a-input>
              </a-form-item>
              <a-form-item label="网站icon">
                <f_image_input v-model="data.project.icon" label="网站icon"></f_image_input>
              </a-form-item>
              <a-form-item label="前端地址">
                <a-input v-model="data.project.webPath" placeholder="前端地址"></a-input>
              </a-form-item>
            </div>
            <div class="title">SEO设置</div>
            <div class="body">
              <a-form-item label="keywords">
                <a-input v-model="data.seo.keywords" placeholder="keywords"></a-input>
              </a-form-item>
              <a-form-item label="description">
                <a-textarea :auto-size="{minRows: 4, maxRows: 5}" v-model="data.seo.description" placeholder="description"></a-textarea>
              </a-form-item>
            </div>
          </a-col>
          <a-col :offset="1" :span="5">
            <div class="title">注册设置</div>
            <div class="body">
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启邮箱注册">
                <a-switch v-model="data.register.isEmailRegister"></a-switch>
              </a-form-item>
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启微信登陆">
                <a-switch v-model="data.register.isWxRegister"></a-switch>
              </a-form-item>
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启手机号注册">
                <a-switch v-model="data.register.isSmsRegister"></a-switch>
              </a-form-item>
            </div>
            <div class="title">登录设置</div>
            <div class="body">
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启用户名密码登陆">
                <a-switch v-model="data.login.isUsernameLogin"></a-switch>
              </a-form-item>
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启邮箱密码登陆">
                <a-switch v-model="data.login.isEmailLogin"></a-switch>
              </a-form-item>
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="是否开启手机号密码登陆">
                <a-switch v-model="data.login.isTelLogin"></a-switch>
              </a-form-item>
              <a-form-item class="start" :label-col-props="labelColProps" :wrapper-col-props="wrapperColProps"
                           label="同账号可登陆设备个数">
                <a-input-number placeholder="同账号可登陆设备个数"
                                v-model="data.login.userSimultaneousLoginCount"></a-input-number>
              </a-form-item>
            </div>

          </a-col>
        </a-row>
      </a-form>
    </f_site_base>
  </div>
</template>

<style lang="less">
.site_info_view {
  padding: 20px;

  .title {
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 1.5rem;
      background-color: rgb(var(--arcoblue-6));
      margin-right: 5px;

    }
  }

  .start {
    .arco-col {
      justify-content: flex-start;
    }
  }
}
</style>